<template>
  <view>
    <image
      class="cardBox-bg"
      :src="sheep.$url.cdn('/static/img/ygb-banner-surprise-2.png')"
      mode="widthFix"
    />
    <view class="form-box ss-m-t-10">
      <uni-forms
        ref="formRef"
        :modelValue="formData"
        :rules="rules"
      >
        <view class="form-section">
          <view class="section-title">账户信息</view>
          <uni-forms-item
            label="类型"
            name="type"
          >
            <view class="form-box-input-item">
              <radio-group
                @change="radioChange"
                class="ss-flex flex-wrap font-1 ss-p-t-14"
                style="width:370rpx;color:#424242"
              >
                <label
                  class="uni-list-cell uni-list-cell-pd ss-flex ss-m-l-10"
                  v-for="(item,) in radioList"
                  :key="item.value"
                >
                  <radio
                    color="#003288"
                    style="transform: scale(0.5)"
                    :value="String(item.value)"
                    :checked="formData.type == item.value"
                  />
                  <view
                    class="font-1"
                    style="color:gray"
                  >{{item.label}}</view>
                </label>
              </radio-group>
            </view>
          </uni-forms-item>
          <uni-forms-item
            label="BD姓名"
            v-if="formData.type==1"
            name="BDname"
          >
            <view class="form-box-input-item">
              <input
                :disabled="true"
                :inputBorder="false"
                v-model="formData.BDname"
                placeholder="请输入BD姓名"
              />
            </view>

          </uni-forms-item>
          <uni-forms-item
            label="BD手机号"
            name="BDmobile"
            v-if="formData.type==1"
          >
            <view class="form-box-input-item">
              <input
                :disabled="true"
                :inputBorder="false"
                v-model="formData.BDmobile"
                placeholder="请输入BD手机号"
              />
            </view>
          </uni-forms-item>
          <uni-forms-item
            label="商户类型"
            name="type"
            v-if="formData.type==1"
          >
            <view class="form-box-input-item">
              <radio-group
                @change="merchantsChange"
                class="ss-flex flex-wrap font-1"
                style="width:370rpx;color:#424242"
              >
                <label
                  class=" uni-list-cell uni-list-cell-pd ss-flex ss-m-l-10"
                  v-for="(item, index) in merchantsRadioList"
                  :key="index"
                >
                  <radio
                    color="#003288"
                    style="transform: scale(0.5)"
                    :value="String(item.value)"
                    :checked="formData.merchantstype == item.value"
                  />
                  <view
                    class="font-1"
                    style="color:gray"
                  >{{item.label}}</view>
                </label>
              </radio-group>
            </view>
          </uni-forms-item>
          <view
            class="btn-box"
            v-if="formData.type==1"
          >
            <button
              class="btn-style"
              @click="submit()"
            >核验</button>
          </view>
        </view>
      </uni-forms>
    </view>
    <view class="imgCardBox">
      <view class="title-style">专属权益</view>
      <view
        v-for="(item,index) in state.messageList"
        :key="index"
        class="data-list"
      >
        <view class="ss-flex">
          <view class="img-box">
            <image
              class="imgSize"
              :src="item.bagUrl"
            />
          </view>
          <view class="text-style">{{index!=5?item.text:(state.role=='user'?'我是商家，填写BD':'我是BD，帮商家入驻')}}</view>
        </view>
        <!-- <view
          v-if="index==5&&state.role!='user'"
          class="ss-flex"
        >
          <button
            @tap="bdApply"
            style="position: absolute;bottom:80rpx;right:20rpx"
            class="ss-reset-button btn-yao"
          >去入驻</button>
        </view> -->
        <!-- <view
          v-if="index==5&&(state.flag===false||state.flag===2)&&state.role=='user'"
          class="ss-flex"
        >
          <button
            v-if="!state.inviteInfo?.id"
            @tap="openTel"
            style="position: absolute;bottom:80rpx;right:20rpx"
            class="ss-reset-button btn-yao"
          >添加</button>
        </view> -->
      </view>
    </view>

  </view>

</template>

<script setup>
import sheep from '@/sheep';
import { computed, reactive, ref } from 'vue';
import { onLoad, onShow, onHide } from '@dcloudio/uni-app';
import Test from "@/sheep/helper/test.js";
import $router from '@/sheep/router';

import commissionAPI from "@/ygb/api/commission"

const formRef = ref(null);
const props = defineProps({});
const radioList = [
  { value: 1, label: 'BD代商户入驻' },
  { value: 0, label: '商户自主入驻' },
]
const merchantsRadioList = [
  { value: 0, label: '鲸囍生活圈' },
]
const state = reactive({
  messageList: [
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/0ee3f6c370c5c47189238af9983962af.png', text: '流量推广扶持' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/0e397156dc4540a701e0c6804c3f4d71.png', text: '用户私域群管理' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/148f2c243362a6f5cce3373db165f9c0.png', text: '私域营销工具扶持' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/1d1d00fc6785d4711fca23be2c83ce29.png', text: '团购，社群推广扶持' },
    { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/d7f892935674e35c1594b952e7c85b9e.png', text: '技术服务见面扶持' },
    // { bagUrl: 'https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250409/78420de13d1881fa815726466ed16c4e.png', text: '' },
  ],
  flag: false,
  invite_phone: '',
  role: 'user',//身份
  inviteInfo: null
})
const emits = defineEmits(['submit', 'getType']);
const rules = {
  BDname: {
    rules: [{
      required: true,
      errorMessage: '请填写姓名',
    },
    ]
  },
  BDmobile: {
    rules: [{
      required: true,
      errorMessage: '请输入联系电话',
    }, {
      validateFunction: (rule, value, data, callback) => {
        return new Promise((resolve, reject) => {
          if (Test.mobile(value)) {
            resolve()
          } else {
            reject(new Error('联系电话格式错误'))
          }
        })
      }
    }]
  },
}
const formData = reactive({
  type: 0,
  BDname: '', // 账户名称
  BDmobile: '', // 负责人姓名
  merchantstype: 0//商户类型
});
const radioChange = (e) => {
  formData.type = e.detail.value
  if (formData.type == 1) {//如果是bd，填入账号信息判断是不是Bd
    formData.BDname = sheep.$store('user').userInfo.nickname
    formData.BDmobile = sheep.$store('user').userInfo.mobile
  }
  emits('getType', formData.type)
}
const merchantsChange = (e) => {

}
const bdApply = () => { }
const submit = () => {
  // goUrl()
  // return
  formRef.value.validate().then(async formVal => {
    if (formVal) {
      const res = await commissionAPI.merchant.getUserRoleByMobile(formData.BDmobile)
      if (res.error == 0) {
        if (res.data.max_role == 'user') {
          uni.showToast({
            title: '您不是BD',
            icon: 'none',
            duration: 2000,
          })
        } else {
          uni.showToast({
            title: '核验成功',
            icon: 'none',
            duration: 2000,
          })
        }
        emits('submit', res.data)
      } else {
        uni.showToast({
          title: res.msg,
          icon: 'none',
          duration: 2000,
        })
        emits('submit', false)
      }

    }
  })
}
const goUrl = () => {
  const obj = {}
  sheep.$router.redirect('/ygb/pages/commission/merchant/apply', obj);

}
onLoad(async () => {
  formData.BDmobile = uni.getStorageSync('invite_phone') || ''
  if (formData.BDmobile) {
    getInviteInfo(formData.BDmobile)
  }
})
async function getInviteInfo (phone) {
  const res = await commissionAPI.merchant.getInviteInfo({ phone })
  if (res.error == 0) {
    state.inviteInfo = res.data
  }
}
</script>

<style lang="scss" scoped>
.btn-box {
  display: flex;
  justify-content: flex-end;
  margin-top: 28rpx;
}
.btn-style {
  width: 140rpx;
  height: 50rpx;
  background: #3662ec;
  font-size: 28rpx;
  font-weight: 500;
  color: #fff;
  padding: 0 !important;
  line-height: 0% !important;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 3rpx;
  border: none;
  margin: 0 !important;
}
.flex-wrap {
  flex-direction: row;
  justify-content: flex-end !important;
}
.form-box-input-item {
  display: flex;
  justify-content: flex-end;
  align-items: center;

  input {
    padding-top: 12rpx;
    font-size: 30rpx;
    text-align: right;
  }
}

::v-deep .uni-forms-item__inner {
  padding-bottom: 0;
  padding-top: 20rpx;
}
::v-deep .uni-forms-item__content {
  border-bottom: 1rpx solid #f5f5f5;
}
.section-title {
  font-size: 14px;
  color: #333;
  padding: 16px 0;
  font-weight: bold;
}
.form-section {
  background: #fff;
  margin-bottom: 0;
  padding: 0 16px;
}
.form-box {
  width: 100%;
  min-height: 100rpx;
  border-radius: 20rpx;
  background: #ffffff;
  box-sizing: border-box;
  // border: 1px solid #dddddd;
  // box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
  padding: 20rpx 10rpx;
}
.cardBox-bg {
  width: 100%;
  height: 295rpx;
}
.invite-box {
  background: linear-gradient(268deg, #5782e3 77%, rgba(87, 129, 227, 0) 102%);
  border-radius: 20rpx;
  color: #fff;
  font-size: 30rpx;
  padding: 30rpx;
  box-sizing: border-box;
  line-height: 1.5em;
}
.imgCardBox {
  padding: 28rpx 30rpx;
  background-color: #fff;
  border-radius: 20rpx;
  margin-top: 20rpx;
  position: relative;
  margin-bottom: 200rpx;
  .title-style {
    font-size: 32rpx;
    font-weight: bold;
    line-height: normal;
    margin-bottom: 19rpx;
  }
  .data-list {
    margin-bottom: 36rpx;
    .img-box {
      position: relative;
      .imgSize {
        width: 85rpx;
        height: 70rpx;
      }
      .imgConSize {
        width: 59rpx;
        height: 41rpx;
        position: absolute;
        top: 12rpx;
        left: 17rpx;
        margin: 0 auto;
      }
    }

    .text-style {
      margin-left: 48rpx;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 131.43%;
    }
  }
}
</style>